import React, { useMemo } from 'react';
import { useNavigate } from 'react-router-dom'
import { Card } from 'antd';
import { data, IData, IItem, IIRecommend } from '../../../utils/mock'
import { isDarck } from '../../../utils/isDarck'
import "./index.less";

interface ICity {
    current: IItem
}
interface IRecommend {
    current: IIRecommend
}

const City: React.FC<ICity> = ({current}) => {
    const navigate = useNavigate()
    return (
        <Card
            key={current.id}
            hoverable
            onClick={()=>navigate(`/home/city?cityName=${current.title}`)}
            style={{ width: 240 }}
            cover={<img alt="example" src={current.url} />}
        >
            <Card.Meta title={current.title} description={current.desc}/>
        </Card>
    )
}

const Recommend: React.FC<IRecommend> = ({current}) => {
    const navigate = useNavigate()
    return (
        <Card
            onClick={()=>navigate(`/home/city?cityName=${current.title}`)}
            hoverable
            style={{display:'flex', padding: '20px', boxSizing: 'border-box', marginBottom: '20px'}}
            bodyStyle={{flex:1}}
            cover={<img style={{ width: '340px'}} alt="example" src={current.url} />}
        >
            <Card.Meta title={current.title} description={current.desc} />
        </Card>
    )
}

const Home: React.FC = () => {
    const { head,  content: { hot, recommend } } = data as IData
    const headUrl: string = useMemo(() => {
        const lightUrl = head.mainPic && head.mainPic.length && head.mainPic[0].url ? head.mainPic[0].url : ''
        const darkUrl = head.darkPic && head.darkPic.length && head.darkPic[0].url ? head.darkPic[0].url : ''

        return isDarck()? darkUrl : lightUrl
    }, [head.mainPic, head.darkPic])
    
    const hotList = useMemo(()=>{
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const sortedArray = hot.list.slice().sort((_a, _b) => 0.5 - Math.random());  
        return sortedArray.slice(0, 3);
    },[hot.list])

    const recommendList = useMemo(()=>{
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const sortedArray = recommend.list.slice().sort((_a, _b) => 0.5 - Math.random());  
        return sortedArray.slice(0, 6);
    },[recommend.list])

    return (
        <div className='home-wrapper'> 
            <div className='home-nav'>
                <div className='banner'>
                    <img src={headUrl} alt="travel pic" />
                    <span> { head.title } </span>
                </div>
                <div className='hot-city'>
                    <div className='hot-city-title'>{ hot.title}</div>
                    <div className='hot-city-nav'>
                        {
                            hotList.map((item) => 
                            ( <City key={item.id} current={item} /> ))
                        }
                        
                    </div>
                </div>
                <div className='city-recommend'>
                <div className='city-recommend-title'>{recommend.title}</div>
                    <div className='city-recommend-nav'>
                        {
                            recommendList.map((item) => 
                            (<Recommend key={item.id} current={item} /> ))
                        }
                    </div>
                </div>
                <div className='footer'>
                    Open-source MIT Licensed | 豫ICP备2023006723号-2 | Copyright © 2017-present
                </div>
            </div>
        </div>
    )
}

export default Home